<%-- 
    Document   : MusicList
    Created on : Jun 7, 2012, 11:35:38 AM
    Author     : Student
--%>

<%@tag description="put the tag description here" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" type="text/css" href="style/style.css" />

<script  src="js/qaEffect.js"></script>
<script src="js/flexiblelist.js"></script>

<%-- The list of normal or fragment attributes can be specified here: --%>

<jsp:useBean id="dao" scope="page" class="connection.DaoSong"/>


<%-- any content can be specified here e.g.: --%>

<div id="itunewindow">

    <script type="text/javascript">
        function searchit(){
            var keyword = document.getElementById('searchbar').value;
            for(var i=0;i<document.getElementById('searching').length;i++){
                if(document.getElementsByName("titleS")[i].className == 'titleS'){
                    if(document.getElementsByName("titleS")[i].innerHTML.toLowerCase().indexOf(keyword.toLowerCase()) == -1){
                        document.getElementsByName("titleS")[i].style.height = '0px';
                    }
                    else{
                        document.getElementsByName("titleS")[i].style.height = '20px';
                    }
                } 
            }
        }
    </script>


    <br/> <br/> 

    <div id ="songlist" > 
        <input class="search" />
        <span class="sort" data-sort="question_slide">Sort /<span>
                <ol class="list">

                    <c:forEach items="${dao.retrieveGetSongBy()}" var="song">
                        <li class ="songdetail" >      

                            <div class="question_slide" > 
                                <span class="tracktitle">
                                    ${song.title}
                                </span>


                            </div> 
                            <div class="answer"> 
                                <div id="searching"> 

                                    <img src="${song.imageLocation}" height="60px" width="60px" />

                                    <span class="trackartist">            Artist: ${song.artist} </span>
                                    <br/>
                                    <span class="feature">         Album ${song.album}   </span> 
                                    <br/>
                                    <span class="feature">         Genre ${song.genre} </span>
                                    <br/>
                                    <span class="feature">         Rating ${song.rating} </span>
                                    <br/>
                                    <span class="feature">         Date Released ${song.dateReleased} </span>
                                    <br/>
                                    <span class="feature">        Price ${song.price} </span>
                                    <br/>


                                </div> 
                            </div> 


                        </li>
                    </c:forEach>
                </ol>
                </div>





                <script type="text/javascript"> 
                    initShowHideDivs();
                    // showHideContent(true,-1);	// Automatically expand first item
   
                    var slideSpeed =1;	// Higher value = faster
                    var timer = 1;	// Lower value = faster
                    var expandMultiple = true;
        
                    var options = {
                        valueNames: [ 'tracktitle' ]
                    };

                    var featureList = new List('songlist', options);
        
                </script>   







          aaaaaaaaaaaaaaa    a  </div>